<template>
	<div>
		<div class="div_biggest_bj">
			<el-container>

				<!-- 头部 -->
				<!-- 顶部导航中 最右侧像挂牌一样的东西 -->
				<el-header>
					<div class="div_top">
						<img src="./页面素材/icon.png" class="img_top" />



						<div class="img_top3">
							<img src="./页面素材/top3.png" class="img_pai1" />
							<!-- <div class="div_img_top4">
								<img src="./页面素材/圆角矩形20.png" class="img_gun1" />
								<img src="./页面素材/圆角矩形20.png" class="img_gun2" />
							</div>

							<div class="div_img_top5">
								<img src="./页面素材/圆角矩形20拷贝2.png" class="img_gun3" />
								<img src="./页面素材/圆角矩形20拷贝2.png" class="img_gun4" />
							</div> -->
						</div>

						<ul>
							<li>
								<div class="li_img0" :class="{img_top2:flagList[0].flagLi}" @click="changeList(0)">
									<span>官网首页</span>
								</div>
							</li>


							<li>
								<div class="li_img1" :class="{img_top2:flagList[1].flagLi}" @click="changeList(1)">
									<span>个人主页</span>
								</div>
							</li>

							<li>
								<div class="li_img2" :class="{img_top2:flagList[2].flagLi}" @click="changeList(2)">
									<span>我的班级</span>
								</div>
							</li>

							<li>
								<div class="li_img3" :class="{img_top2:flagList[3].flagLi}" @click="changeList(3)">
									<span>我的考试</span>
								</div>
							</li>

							<li>
								<div class="li_img4" :class="{img_top2:flagList[4].flagLi}" @click="changeList(4)">
									<span>我的成果</span>
								</div>
							</li>

							<li>
								<div class="li_img5" :class="{img_top2:flagList[5].flagLi}" @click="changeList(5)">
									<span>我的保表</span>
								</div>
							</li>

							<li>
								<div class="li_img6" :class="{img_top2:flagList[6].flagLi}" @click="changeList(6)">
									<span>我的作品</span>
								</div>
							</li>

							<li>
								<div class="li_img7" :class="{img_top2:flagList[7].flagLi}" @click="changeList(7)">
									<span>免费公开课</span>
								</div>
							</li>

							<li>
								<div class="li_img8" :class="{img_top2:flagList[8].flagLi}" @click="changeList(8)">
									<span>金币商城</span>
								</div>
							</li>

							<li>
								<div class="li_img9" :class="{img_top2:flagList[9].flagLi}" @click="changeList(9)">
									<span>在线创作</span>
								</div>
							</li>
						</ul>

						<div class="div_yellow"></div>
					</div>
				</el-header>

				<el-container>
					<el-main class="div_main">
						<router-view></router-view>
					</el-main>
				</el-container>

			</el-container>


		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//flagList:[true,false,false,false,false,false,false,false,false,false,],
				flagList: [{
						flagLi: true,
						theUrl: "/BLMtop/BLMmain"
					},
					{
						flagLi: false,
						theUrl: ""
					},
					{
						flagLi: false,
						theUrl: ""
					},
					{
						flagLi: false,
						theUrl: ""
					},
					{
						flagLi: false,
						theUrl: ""
					},
					{
						flagLi: false,
						theUrl: ""
					},
					{
						flagLi: false,
						theUrl: ""
					},
					{
						flagLi: false,
						theUrl: ""
					},
					{
						flagLi: false,
						theUrl: "/BLMtop/BLMGoldNesw"
					},
					{
						flagLi: false,
						theUrl: ""
					},
				]
			}
		},
		methods: {
			changeList(index) {
				for (let i = 0; i < this.flagList.length; i++) {
					this.flagList[i].flagLi = false;

					if (index === i) {
						this.flagList[i].flagLi = true;
						this.$router.push(this.flagList[i].theUrl);
					}
				};

			}
		},
		mounted() {
			this.$router.push("/BLMtop/BLMmain");
		}
	}
</script>

<style scoped>
	.div_biggest_bj {
		width: 100%;
		height: 5.625rem;
		background: url(./页面素材/背景.png);
		background-size: 100% 100%;
	}

	/* 头部 */
	.div_top {
		background: url(./页面素材/导航栏背景.png);
		background-size: 100% 100%;
		height: 0.5rem;
		position: relative;
		padding-left: 1.25rem;
	}

	.div_top ul {
		float: left;
		margin: 0;
		margin-top: 0.09375rem;
	}

	.div_top ul li {
		float: left;
		margin-right: 0.125rem;
		list-style-type: none;
	}

	.div_top ul li>div {
		height: 0.15625rem;
		width: 0.40625rem;
		font-size: 0.0625rem;
		font-weight: 600;
		line-height: 0.10625rem;
		color: white;
		text-align: center;
		background-size: 0.1125rem 0.1125rem, 0.34375rem 0.28125rem, 0.36875rem 0.30625rem, 100% 100%;
		background-position: 0.14375rem 0.0625rem, 0.03125rem 0.03125rem, 0.01875rem 0.01875rem, 0 0;
		background-repeat: no-repeat;
		padding-top: 0.1875rem;
		cursor: pointer;
	}


	.div_top ul li>.li_img0 {
		background-image:
			url(./页面素材/元素.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img1 {
		background-image:
			url(./页面素材/主页.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img2 {
		background-image:
			url(./页面素材/简报.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img3 {
		background-image:
			url(./页面素材/调查.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img4 {
		background-image:
			url(./页面素材/纪要.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img5 {
		background-image:
			url(./页面素材/合同.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img6 {
		background-image:
			url(./页面素材/元素.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img7 {
		background-image:
			url(./页面素材/员工黄页.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img8 {
		background-image:
			url(./页面素材/金币.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}

	.div_top ul li>.li_img9 {
		background-image:
			url(./页面素材/知识中心.png),
			url(./页面素材/按钮背景3.png),
			url(./页面素材/按钮背景1.png),
			url(./页面素材/按钮背景.png);
	}



	.div_top ul li>div i {
		font-size: 0.125rem;
	}

	.img_top {
		width: 1rem;
		margin-top: 0.125rem;
		float: left;
	}

	/* 头部黄色的导航 */
	.div_top ul li>.img_top2 {
		background: url(./页面素材/click2.png);
		background-size: 100% 100%;
		width: 0.40625rem;
		height: 0.1875rem;
		padding-top: 0.28125rem;
		font-size: 0.08125rem;
		color: #333;
		font-weight: 900;
		text-align: center;
	}

	.img_top3 {
		width: 0.75rem;
		position: absolute;
		left: 90%;
		top: 0.0375rem;
		text-align: center;
	}

	.img_top3 .img_pai1 {
		float: left;
		width: 0.75rem;
	}

	.div_img_top4 {
		float: left;
		background: url(./页面素材/组26.png);
		background-size: 100% 100%;
		margin-left: 0.0625rem;
		margin-top: 0.07rem;
		width: 0.5625rem;
		height: 0.21875rem;
		position: relative;
	}

	.img_top3 .img_gun1 {
		width: 0.025rem;
		position: absolute;
		left: 0.11875rem;
		top: -0.125rem;
	}

	.img_top3 .img_gun2 {
		width: 0.025rem;
		position: absolute;
		left: 0.4125rem;
		top: -0.125rem;
	}

	.div_img_top5 {
		float: left;
		background: url(./页面素材/组27.png);
		background-size: 100% 100%;
		margin-left: 0.0625rem;
		margin-top: 0.03125rem;
		width: 0.5625rem;
		height: 0.21875rem;
		position: relative;
	}

	.img_top3 .img_gun3 {
		width: 0.025rem;
		position: absolute;
		left: 0.1125rem;
		top: -0.0625rem;
	}

	.img_top3 .img_gun4 {
		width: 0.025rem;
		position: absolute;
		left: 0.425rem;
		top: -0.0625rem;
	}

	.div_main {
		padding: 0;
		margin-top: 0.125rem;
	}
</style>
